<template>
  <div class="yingShouHeXiaoPage">
    <el-card class="card-box">
      <div class="head">
        <h1>{{detailsInfo.projectName}}</h1>
      </div>
      <div class="info-box">
        <el-form>
          <el-row>
            <el-col  :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同名称:">
                <span>{{detailsInfo.contractName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同编号:">
                <span>{{detailsInfo.contractId}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同类型:">
                <span>{{['','新签','续签','退租'][detailsInfo.contractType]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="资产名称:">
                <span>{{detailsInfo.assetsName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="位置:">
                <span>{{detailsInfo.street}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="承租方:">
                <span>{{detailsInfo.customerNames}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item class="form-item-margin_bottom" label="服务期限:">
                <span>{{detailsInfo.signStartTime+'/'+detailsInfo.signEndTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6"></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="card-box m-t30">
      <div class="info-box">
        <el-form>
          <el-row>
            <el-col  :span="6">
              <el-form-item class="form-item-margin_bottom" label="本次缴费:">
                <span>保证金</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="应缴保证金:">
                <span>{{detailsInfo.deposit}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="实际到账保证金:">
                <span>{{detailsInfo.receiptsDeposit}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="流水号:">
                <span>{{detailsInfo.depositPaymentRecordId || '暂无'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="备注:">
                <el-input v-model="param.remarks" placeholder="非必填"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <div class="button-wrap d-flex a-center j-center m-t30">
      <el-button @click="onCancel" color="#ff8350" style="color: #FFFFFF;padding: 0 20px">取消</el-button>
      <el-button @click="onSubmit" color="#93d6ff" style="color: #FFFFFF;padding: 0 20px">确认核销</el-button>
    </div>
  </div>
</template>

<script setup>
import {leaseApi} from "@/api/lease";
import { ref,onMounted,reactive } from "vue";
import {useRouter} from "vue-router";
import {ElCard,ElForm,ElFormItem,ElRow,ElCol,ElMessage,ElInput} from "element-plus";

const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const detailsInfo = ref({});


// 押金详情
const getDepositCollectionInfo = () => {
  leaseApi.getDepositCollectionInfo({
    contractId:contractId
  }).then(res=>{
    detailsInfo.value = res.data;
    tableData.value = res.data.list;
    tableOption.value[tableOption.value.length-1].label = ['','月','季','年'][detailsInfo.value.payType]+'租金';
  });
}

const param = reactive({
  contractId:contractId, // 合同编号
  depositPaymentRecordId:'',// 流水号
  receivableRent:'', // 应收押金
  receivedRent:'', // 实收押金
  remarks:'',
});

// 确认核销
const onSubmit  = () => {
  param.depositPaymentRecordId = detailsInfo.value.depositPaymentRecordId;
  param.receivableRent = detailsInfo.value.deposit;
  param.receivedRent = detailsInfo.value.receiptsDeposit;
  leaseApi.submitDepositCancellation(param).then(res=>{
    if(res.code == 200){
      ElMessage.success('核销成功!');
      router.push({ path: "/asset/management/managementIndex", query: {} });
    }
  });
}

const onCancel = () => {
  router.push({ path: "/asset/management/managementIndex", query: {} });
}

onMounted(()=>{
  getDepositCollectionInfo();
});
</script>

<style lang="scss" scoped>
.yingShouHeXiaoPage{
  .form-item-margin_bottom{
    margin-bottom: 0!important;
  }
  .card-box{
    width: 90%;
  }
  .button-wrap{}
}
</style>
